<template>
    <div class="settings-widget profile-details">
        <div class="settings-menu p-0">
            <div class="profile-heading">
                <h3>老师的个人信息</h3>
                <p>想象，创造和分享，用编程创造美好未来！</p>
            </div>
            <div class="course-group mb-0 d-flex">
                <div class="course-group-img d-flex align-items-center">
                    <a href="instructor-profile.html"><img :src="user.avatar" alt="" class="img-fluid"></a>
                    <div class="course-name">
                        <h4><a href="instructor-profile.html">王老师</a></h4>
                        <p>注册时间：</p>
                        <p>最后登录时间：</p>
                    </div>
                </div>
                <div class="profile-share d-flex align-items-center justify-content-center">
                    <!-- <a class="btn btn-success">修改头像</a> -->
                    <app-upload-img v-model="user.avatar" />
                </div>
            </div>
            <div class="checkout-form personal-address add-course-info">
                <div class="personal-info-head">
                    <h4>修改个人信息</h4>
                </div>
                <form action="#">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="form-control-label">姓名</label>
                                <input type="text" class="form-control" placeholder="Enter your first Name">
                            </div>
                            <div class="form-group">
                                <label class="form-control-label">昵称</label>
                                <input type="text" class="form-control" placeholder="Enter your last Name">
                            </div>
                            <div class="form-group">
                                <label class="form-control-label">电话</label>
                                <input type="text" class="form-control" placeholder="Enter your Phone">
                            </div>
                            <div class="form-group">
                                <label class="form-control-label">邮箱</label>
                                <input type="text" class="form-control" placeholder="Enter your Email">
                            </div>
                            <div class="form-group">
                                <label class="form-control-label">个人签名</label>
                                <input type="text" class="form-control" placeholder="Birth of Date">
                            </div>
                        </div>



                        <div class="update-profile">
                            <button type="button" class="btn btn-primary">更新个人信息</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>

<script setup>
const user = reactive({
    avatar: 'http://localhost:3000/_nuxt/assets/img/user/user11.jpg'
})
</script>